<template>
	<view class="bdy">
		<!-- #ifndef H5 -->
		<Nav></Nav>
		<!-- #endif -->
		<view class="header">
			<view class="header_pic">
				<view>
					<image class="header_img" :src="headerSrc" mode=""></image>
				</view>
				<view class="username">{{ nickname }}</view>
				<view class="experience">
					<text>积分：</text>
					{{ experience }}
				</view>
			</view>
		</view>
		<view class="vip_main">
			<view :class="{btn: type, btn1: !type}" @click="popup">
				<text>立即签到</text>
			</view>
		</view>

		<view
			class="load"
			:style="{
				'top:calc((100vh - 750rpx)/2);opacity: 0;z-index:-1;': !sign
			}"
		>
			<image class="loadingpic" src="./static/light.png"></image>
			<image class="load-imagae" src="./static/register.png"></image>
			<view class="load-centent">
				<view><text>签到成功</text></view>
				<view>
					<text>获得</text>
					{{ currentIntegral }}
					<text>积分</text>
				</view>
				<view @click="popup"><text>好的</text></view>
			</view>
		</view>
		<view class="fanye">
			<image
				src="./static/lock2.png"
				style="width: 70%; height: 60rpx;"
			></image>
		</view>
		<view class="count_down">
			<view class="signIntext"><text>已累计签到</text></view>
			<view class="timeBox">
				<view class="signInTIME">
					{{ hundreds > 9 ? kilobit : kilobit }}
				</view>
				<view class="signInTIME">{{ hundreds }}</view>
				<view class="signInTIME">0</view>
				<view class="signInTIME">
					{{ signInTIME > 9 ? 0 : signInTIME }}
				</view>
				<view class="timeText"><text>天</text></view>
			</view>
			<view class="wenben">
				<text>
					据说连续签到第0天可获得超额积分，一定要坚持签到哦~~~
				</text>
			</view>
			<view class="dateList">
				<view class="dateitem" v-for="(item, index) in dateList">
					<view class="dateTitle">{{ item.title }}</view>
					<view class="dateDay">{{ item.createDay }}</view>
					<view class="dateNm">+{{ item.number }}</view>
				</view>
			</view>
			<view class="more"><text>点击加载更多 ></text></view>
		</view>
	</view>
</template>

<script>
import {
	getuserInfo,
	getintegral,
	signIn,
	signInList
} from "./../../../network/vip.js";
import Nav from "@/components/top_nav.vue";
export default {
	data() {
		return {
			nickname: "",
			headerSrc: "",
			show: false,
			sign: false,
			experience: "",
			signInTIME: "",
			currentIntegral: "",
			dateList: [],
			ten: 0,
			type: true,
			hundreds: 0,
			kilobit: 0
		};
	},
	components: {
		Nav
	},
	methods: {
		changeHun() {
			if (this.ten > 9) {
				this.hundreds++;
			} else {
				this.hundreds;
			}
		},
		open() {
			// console.log('open');
		},
		close() {
			this.show = false;
			// console.log('close');
		},
		popup(e) {
			this.sign = !this.sign;
			this.type = false;
		},
		async get() {
			let {data} = await getuserInfo();
			console.log(data);
			this.nickname = data.nickname;
			this.experience = data.experience;
			this.headerSrc = data.avatar;
			this.type = data.isPromoter;
		},
		async getUser() {
			let {data} = await getintegral();
			console.log(data);
			this.signInTIME = data.sumSignDay;
		},
		async srtSignIn() {
			let data = await signIn();
			console.log(data);
			this.currentIntegral = data.integral;
		},
		async getList() {
			let {data} = await signInList();
			console.log(data.list);
			this.dateList = data.list;
			console.log(this.dateList);
		}
	},
	created() {
		this.get();
		this.getUser();
		this.srtSignIn();
		this.getList();
		this.changeHun();
	}
};
</script>

<style lang="scss">
.more {
	text-align: center;
	margin-top: 20rpx;
	font-size: 40rpx;
}
.dateList {
	margin-top: 100rpx;
	.dateitem {
		margin-left: 20rpx;
		height: 120rpx;
		border-bottom: 1px solid #e4e4e4;
		.dateTitle {
			margin-top: 20rpx;
			margin-bottom: 10rpx;
		}
		.dateDay {
			font-size: 30rpx;
			color: gray;
			margin-bottom: 25rpx;
		}
		.dateNm {
			position: relative;
			top: -100rpx;
			left: 480rpx;
			color: red;
			font-size: 40rpx;
			font-weight: lighter;
		}
	}
}
.wenben {
	text-align: center;
	font-size: 30rpx;
	color: #ccc7cc;
	margin-top: 10rpx;
}
.bdy {
	height: 100%;
	background-color: #ebebeb;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #f3f3f3;
}
.header {
	background-color: red;
	width: 100%;
	height: 380rpx;
	.header_pic {
		.header_img {
			height: 100rpx;
			width: 100rpx;
			border-radius: 50%;
			// display: flex;
			// flex-direction: column;
			// username
			margin-top: 40rpx;
			margin-left: 30rpx;
		}
		.username {
			display: inline-block;
			position: relative;
			top: -100rpx;
			left: 150rpx;
			color: #fae2c1;
		}
	}
}
.vip_main {
	background-color: #fff;
	width: 600rpx;
	height: 360rpx;
	margin: -100rpx auto 0 auto;
	border-radius: 23rpx;
	padding: 22rpx 27rpx;
	.vip_suffer {
		color: #ae8b4a;
		font-size: 24rpx;
	}
	.vip_integral {
		font-size: 60rpx;
		color: #775c29;
		margin-top: 6rpx;
	}
	hr {
		margin-top: 20rpx;
		margin-bottom: 50rpx;
	}
}
.btn {
	width: 400rpx;
	height: 80rpx;
	border-radius: 50rpx;
	/* border: solid 1px black; */
	position: relative;
	top: 200rpx;
	left: 80rpx;
	text-align: center;
	line-height: 80rpx;
	background-color: red;
	color: white;
}
.btn1 {
	width: 400rpx;
	height: 80rpx;
	border-radius: 50rpx;
	/* border: solid 1px black; */
	position: relative;
	top: 200rpx;
	left: 80rpx;
	text-align: center;
	line-height: 80rpx;
	background-color: gray;
	color: white;
}
.successBox {
	background-image: url("");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 56rpx;
	height: 56rpx;
	margin: 10rpx 0;
}
.box {
	width: 75rpx;
	height: 56rpx;
}
/* .top_logo{
				width: 100rpx;
				height: 100rpx;
				
			} */
.main_logo {
	width: 100%;
	/* height: 500rpx; */
	vertical-align: auto;
	text-align: center;
	position: relative;
	top: 0rpx;
	/* left: -50rpx; */
	/* background-image: url('./static/register.png'); */
	opacity: 1;
}
.pic_box {
	width: 500rpx;
	background-color: #fff;

	/* height: 500rpx; */
	opacity: 0.5;
}
page {
	background-color: #ccc;
}
view {
	box-sizing: border-box;
}
button {
	margin-top: 50rpx;
}
.load {
	width: 80%;
	height: 600rpx;
	position: fixed;
	top: calc((100vh - 800rpx) / 2);
	left: 10%;
	transition: all 0.3s ease-in-out 0s;
	-webkit-transition: all 0.3s ease-in-out 0s;
	opacity: 1;
	z-index: 10;
}
.loadingpic {
	width: 100%;
	height: 93%;
	position: absolute;
	animation: load 3s linear 1s infinite;
	z-index: 10;
	margin-top: 7%;
}
@keyframes load {
	0% {
		webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.load-imagae {
	width: 400rpx;
	height: 400rpx;
	margin: 100rpx calc((100% - 400rpx) / 2);
	position: absolute;
	z-index: 11;
}
.load-centent {
	width: 400rpx;
	height: 400rpx;
	margin: 100rpx calc((100% - 400rpx) / 2);
	position: relative;
	z-index: 12;
	text-align: center;
	padding: 25% 10% 5% 10%;
}
.load-centent > view:nth-child(1) {
	font-size: 34rpx;
	color: #fff;
}
.load-centent > view:nth-child(2) {
	color: #fff;
	opacity: 0.7;
	margin: 20rpx 0;
	font-size: 24rpx;
}
.load-centent > view:nth-child(3) {
	width: 85%;
	margin: 30rpx 7.5% 0 7.5%;
	height: 70rpx;
	line-height: 70rpx;
	border-radius: 40rpx;
	background-color: #f8d168;
	color: #eb4331;
	font-size: 30rpx;
}
.experience {
	// border: solid 1px black;
	width: 120rpx;
	height: 30rpx;
	background-color: #f8d168;
	text-align: center;
	line-height: 30rpx;
	position: relative;
	top: -90rpx;
	left: 150rpx;
	border-radius: 5rpx;
	font-size: 14rpx;
}
.fanye {
	width: 100%;
	height: 250rpx;
	position: relative;
	top: -20rpx;
	left: 100rpx;
}
.count_down {
	background-color: #fff;
	width: 600rpx;
	// gai
	// height: 1360rpx;
	margin: -235rpx auto 0 auto;
	border-radius: 23rpx 23rpx 0 0;
	padding: 22rpx 27rpx;
}
.signIntext {
	text-align: center;
	margin-top: 50rpx;
}
.signInTIME {
	width: 80rpx;
	height: 100rpx;
	// border: solid 1px black;
	background-color: red;
	margin-top: 50rpx;
	text-align: center;
	line-height: 100rpx;
	border-radius: 15rpx;
	margin-left: 35rpx;
	color: white;
	font-size: 50rpx;
	font-weight: bold;
}
.timeBox {
	display: flex;
	flex-direction: row;
}
.timeText {
	width: 80rpx;
	height: 100rpx;
	// border: solid 1px black;
	// background-color: red;
	margin-top: 50rpx;
	text-align: center;
	line-height: 100rpx;
	border-radius: 15rpx;
	margin-left: 35rpx;
	// color: white;
	font-size: 50rpx;
	font-weight: bold;
}
</style>
